<style lang="less">
//导航
page{
	background: #f6f6f6;
	padding-bottom: 120upx;
}
  .container{
  }
	.main{
		width: 100%;
	}
  .main-top{
    padding: 15upx 30upx;
	margin-top: 20upx;
	background: #FFFFFF;
  }
	.main_detailText{
		padding: 20upx 30upx;
	}
	.title{
		display: block;
		width: 100%;
		color:rgba(51,51,51,1);
    font-size:32upx;
    font-weight:bold;
	}
	.detailText{
		display: block;
		width: 100%;
		font-size: 26upx;
		line-height: 40upx;
		margin-top: 40upx;
		font-size:32upx;
		font-weight:500;
		height: 200upx;
		min-height: 200upx;
		line-height: 42upx;
		color:#333333;
		overflow-y: scroll;
	}
	.shangchuan{
		overflow: hidden;
		margin-top: 10upx;
    .shangchuan_list{
      float: left;
      width: 28%;
      height: 200upx;
      max-height: 200upx;
      margin: 15upx 2% 0;
      display: flex;
      align-items:center;
      border-radius: 4upx;
      position: relative;
      overflow: hidden;
      .list_image{
      	width: 100%;
        height: auto;
      }
    }
	}
  .placeholder{
	font-size:32upx;
	font-weight:bold;
	color:rgba(221,221,221,1);
	line-height:41upx;
  }
  .renshu{
	  color:rgba(221,221,221,1);
  }
  .huodTime{
	  color:rgba(51,51,51,1);
	  padding: 20upx 0;
	  font-size:28upx;
	  color:rgba(51,51,51,1);
	  line-height:34upx;
	  background: url('https://xpandago.oss-cn-shanghai.aliyuncs.com/wechat/arrow-right%402x.png') no-repeat right center;
	  background-size: 36upx;
  }
  .tip{
	  font-size:26upx;
	  color:rgba(153,153,153,1);
	  line-height:41upx;
  }
  .renshuInput{
	  display: block;
	  padding: 20upx 0;
	  border-top: 1upx solid #ededed;
	  font-size:28upx;
	  color:rgba(51,51,51,1);
	  line-height:34upx;
  }
  .mony{
	  overflow: hidden;
	  margin-top: 10upx;
	  text{
		  font-size:60upx;
		  font-family:'DINCond';
		  font-weight:400;
		  color:rgba(51,51,51,1);
		  line-height:72upx;
		  float: left;
	  }
	  .jinrInput{
		  float: left;
		  font-size:46upx;
		  font-family:'DINCond';
		  line-height:55upx;
		  margin-left: 20upx;
		  color:rgba(51,51,51,1);
	  }
	  .jinr{
		 color:rgba(221,221,221,1); 
	  }
  }
  .stuts{
	  width: 100%;
	  .stuts_image{
		display: block;
		  margin: 0 auto;
		  height: auto;
	  }
  }
  .stuts-title{
	  font-size:30upx;
	  font-weight:bold;
	  color:rgba(51,51,51,1);
	  line-height:56upx;
	  text-align: center;
  }
  .stuts-centent{
	  background:rgba(247,247,247,1);
	  border:1upx solid rgba(237,237,237,1);
	  border-radius:4upx;
	  font-size:24upx;
	  color:rgba(153,153,153,1);
	  line-height:36upx;
	  padding: 15upx;
	  margin-top: 20upx;
  }
</style>
<template>
	<view class="container">
		<view class="main">
			<view class="main-top">
				<view class="stuts" v-if="data.status == 1">
					<image src="https://xpandago.oss-cn-shanghai.aliyuncs.com/wechat/images/shenheliucheng_bar%402x.png" mode="widthFix" class ="stuts_image" ></image>
				</view>
				<view class="stuts" v-else-if="data.status == 2">
					<view class="stuts-title">- 申请成功 -</view>
					<view class="stuts-centent" v-if="data.reason != '' && data.reason !=null">{{data.reason}}</view>
				</view>
				<view class="stuts" v-else-if="data.status == 3">
					<view class="stuts-title">- 申请失败 -</view>
					<view class="stuts-centent" v-if="data.reason != '' && data.reason !=null">{{data.reason}}</view>
				</view>
			</view>
			<view class="main_detailText main-top">
				<view class="title">{{data.title}}</view>
				<view class="detailText">{{data.content}}</view>
				<view class="shangchuan">
				  <view v-for="(image,index) in contentPicGroup" :key="index" class="shangchuan_list">
				    <image :src="'https://static.xpandago.net'+'/'+image" mode="widthFix" class ="list_image" ></image>
				  </view>
				</view>
			</view>
			<view class="main-top pz">
				<view class="title">上传凭证</view>
				<view class="shangchuan">
				  <view v-for="(image,index) in voucherPicGroup" :key="index" class="shangchuan_list">
				    <image :src="'https://static.xpandago.net'+'/'+image" mode="widthFix" class ="list_image" ></image>
				  </view>
				</view>
				<view class="tip">请上传活动的消费单据、小票、发票等凭证</view>
			</view>
			<view class="main-top">
				<view class="huodTime">{{time}}</view>
				<view class="renshuInput">{{data.address}}</view>
				<view class="renshuInput">{{data.peopleNum}}</view>
			</view>
			<view class="main-top">
				<view class="title">申请金额</view>
				<view class="mony">
					<text>¥</text>
					<view class="jinrInput">{{data.amount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api'
	export default {
		data() {
			return {
				data:'',
				time:'',
				contentPicGroup:[],
				voucherPicGroup:[],
			}
		},
		onLoad(options) {
			this.id=options.id
			this.allowanceInfo()
		},
		methods: {
			async allowanceInfo(){
				const token=uni.getStorageSync('token')
				const [err, res] = await api.allowanceInfo({
					query: {
					 },
					 header:{
						'Content-Type': 'application/json',
						'token': token
					 },
					 url:api.apiMall2+'app/member/allowance/info/'+this.id,
				 });
				 console.log(res)
				 if(res.data.code == 0){
					 this.data=res.data.data
					 let str=this.data.time
					 this.time=str.substring(0,10);
					 this.contentPicGroup=this.data.contentPicGroup.split(',')
					 console.log(this.contentPicGroup)
					 this.voucherPicGroup=this.data.voucherPicGroup.split(',')
					 console.log(this.voucherPicGroup)
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
				 }
			}
		}
	}
</script>
